<template>
    <div class="mime-live-detail-wrap">
      <div class="mime-live-img" style="height: 211px">
        <img :src="liveImg">
      </div>
      <div class="mime-live-detail-content padding-12">
        <h4 class="detail-title">{{liveTitle}}</h4>
        <div class="detail-content van-hairline--bottom" v-html="liveContent"></div>
      </div>
      <!--底部-->
      <div class="mime-live-footer van-hairline--top">
        <a  :href="liveUrl" >立即观看</a>
      </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { Row, Col } from 'vant'
  export default {
    name: 'MimeLiveDetail',
    components: {
      [Row.name]: Row,
      [Col.name]: Col
    },
    mounted () {
      this.getLiveData()
    },
    data () {
      return {
        id: this.$route.query.id,
        CDNimgUrl: this.GLOBAL.CDNimgUrl,
        liveImg: '',
        liveTitle: '',
        liveContent: '',
        liveUrl: ''
      }
    },
    methods: {
      getLiveData () {
        ajax.doAction({
          url: '/live/' + this.id,
          type: 'GET',
          successCallback: (data) => {
              // console.log(data);
            let datas = data.data
            this.liveImg = this.CDNimgUrl + datas.image
            this.liveTitle = datas.title
            this.liveContent = datas.brief
            this.liveUrl = datas.live_url
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      }
    }
  }
</script>

<style scoped>
.mime-live-footer{
  position: fixed;
  height: 50px;
  line-height: 50px;
  width:100%;
  text-align: center;
  left:0;
  bottom: 0;
}
.mime-live-footer a{
  display: block;
  background: #0085ca;
  color: #fff;
}
</style>
